<!--
  独立页面，用来测试iframe嵌套此项目，如何进行标点操作，
  浏览器本地访问此页面即可
-->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试iframe嵌套三维地图的应用功能</title>
  <style>
    html,
    body,
    .layout {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
    }

    .layout {
      display: flex;
      flex-direction: row;
    }

    .left {
      width: 350px;

      word-wrap: break-word;
      overflow-y: auto;
    }

    .right {
      flex: 1;
    }

    iframe {
      padding: 0;
      margin: 0;
    }
  </style>
</head>

<body>
<div class="layout">
  <!--    <div class="left">-->
  <!--      <a href="javascript:void(0)" onclick="clearText()">清空</a>-->
  <!--      <span id="dataShowArea"></span>-->
  <!--    </div>-->
  <!--    <div class="right">-->
  <iframe id="myframe" frameborder="0" width="100%" height="100%"></iframe>
  <!--    </div>-->
</div>

<script>
    const earthUrl = 'http://192.168.20.123:9140/#/?func=3dLocation'
    window.onload = function () {
      const _iframe = document.querySelector("#myframe")
      _iframe.setAttribute('src', earthUrl)
      _iframe.onload = handeLoad
    }

    window.addEventListener('message', handleDataReceive)


    function handeLoad(e) {
      const target = e.target
      setTimeout(() => {
        const jsonStr = JSON.stringify({
          type: '3dLocation',
          data: {
            tileUrl: 'http://182.151.56.8:3333/SiChuan/GuangYuan/E-GY010/tileset.json',
            toolConfig: {
              //mapPrint: [],
              plottingTool: ['pin'], // , 'line', 'rectangle', 'polygonStretch', 'DoubleArrow', 'flatarrow', 'path', 'model'
              // plotAnalysis: ['pinbutton', 'linebutton', 'linebutton2', 'facebutton', 'polygon', 'reset'],
              // accidentSimulation: ['inundationAnalysis', 'Scanline', 'particlesystem']
            },
            // plottingToolBox_Hidden: true,
            plottedBox_Hidden: true,
            isApp: true,
            recording_hidden: true
          }
        })
        target.contentWindow.postMessage(jsonStr, '*')
      }, 1000);
    }

    function handleDataReceive(d) {
        console.log('test'+d.data)
        // 把d.data通过window.postMessage发送到手机webview
        alert('test'+d.data)
        window.postMessage('caonima',d.data)
        //window.open(d.data);
      // document.querySelector('#dataShowArea').innerHTML += ('<br/>' + d.data)
    }

    function clearText() {
      document.querySelector('#dataShowArea').innerHTML = ''
    }

  </script>
</body>

</html>